<template>
  <div>
    <div class="flex justify-between min-w-full mb-8">
      <el-carousel
        ref="headBanner"
        indicator-position="outside"
        class="w-full"
        :autoplay="true"
        height="38rem"
        style="position: relative"
      >
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <a :href="item.redirectUrl">
            <el-image
              style="width: 100%; height: 100%"
              :src="item.picture"
            ></el-image>
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="w-1200-container content-container">
      <div class="main-box">
        <div class="select-container">
          <router-select-strip
            listPropVName="dictLabel"
            :active-id.sync="queryParams.confirmyear"
            :screenList="yearList"
            label="认定年度"
            @itemClick="handleConfirmYear"
          />
          <DashLine />
          <router-select-strip
            listPropVName="dictLabel"
            :active-id.sync="queryParams.companyId"
            :screenList="companyTypes"
            label="认定类型"
            @itemClick="handleCompany"
          />
        </div>

        <ul class="list-container">
          <company-card
            v-for="item in infoList"
            :key="item.id"
            :companyIcon="item.icon"
            :companyName="item.name"
            :buildTime="item.buildTime"
            :address="item.address"
            :listed="item.listed"
            :hightCompany="item.hightCompany"
          />
        </ul>
        <pagination
          v-if="tableTotal > 0"
          :total="tableTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <div class="aside-box">
        <company-year-echart />
        <ul class="level-aside-list">
          <li class="item">
            <level-link-card title="2020年度江西省种子独角兽企业榜单" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

import { getInfo } from '@/api/level'

import RouterSelectStrip from "@/components/HeadScreenStrip/RouterSelectStrip.vue";
import DashLine from "@/components/DashLine";
import CompanyCard from "@/views/components/CompanyCard";
import CompanyYearEchart from "./CompanyYearEchart.vue";
import LevelLinkCard from '@/views/components/LevelLinkCard'
export default {
  components: {
    RouterSelectStrip,
    DashLine,
    CompanyCard,
    CompanyYearEchart,
    LevelLinkCard
  },
  data() {
    return {
      tableTotal: 1,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyId: undefined,
        confirmyear: undefined,
      },
      infoList: [
        {
          name: "南昌黑鲨科技有限公司",
          hightCompany: 1,
          icon: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          listed: 0,
          address: "江西-南昌",
          buildTime: "2017-08-09",
        },
        {
          name: "南昌黑鲨科技有限公司",
          hightCompany: 2,
          icon: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          listed: 0,
          address: "江西-南昌",
          buildTime: "2017-08-09",
        },
      ],
      bannerList: [
        {
          picture: require("@/assets/images/img-placeholder.jpg"),
          redirectUrl: "",
          id: 3,
        },
      ],
      companyTypes: [
        { dictValue: 0, dictLabel: "瞪羚企业" },
        { dictValue: 1, dictLabel: "独角兽企业" },
        { dictValue: 2, dictLabel: "潜在独角兽企业" },
        { dictValue: 3, dictLabel: "种子独角兽企业" },
      ],
      yearList: [
        { dictValue: 0, dictLabel: "2021" },
        { dictValue: 1, dictLabel: "2020" },
        { dictValue: 2, dictLabel: "2019" },
        { dictValue: 3, dictLabel: "2018" },
      ],
    };
  },
  created(){
    this.getList()
  },
  methods: {
    async getList() {
      let queryParams = { ...this.queryParams }
      if(queryParams.serial === undefined){
        queryParams.serial = 0
      }
      let res = await getInfo(queryParams)
    },
    handleConfirmYear(activeItem) {
      this.getList();
    },
    handleCompany() {
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.select-container {
  background-color: #f6f9ff;
}
.list-container {
  // min-height: 1350px;
  @apply py-4 mt-4;
  .list-item {
    @apply flex p-4 border-b-2  border-gray-100 cursor-pointer;
    .left {
      min-width: 103px;
      min-height: 103px;
      width: 103px;
      height: 103px;
      @apply rounded-md shadow-lg;
    }
    .main {
      @apply flex-1 flex-grow flex flex-col justify-around px-4;
      .sub-line {
        @apply flex;
        li {
          @apply mr-4;
        }
      }
    }
    .right {
      @apply m-auto text-t999;
    }
  }
}
.level-aside-list {
  @apply py-4;
}
</style>